<template>
  <div class="com-container ">
      <div class="com-chart" ref='seller_ref'></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'


export default {
    name:'Seller',
    data() {
        return {
            chartInstance:null,
            allData:[],
            yData:[],
            currentPage:1,// 当前页码
            totalPage:0, // 总页码
            timerId:null
        }
    },
     created() {
        // 当服务器发送数据过来 调用getData
        this.$socket.registerCallBack('SellerData', this.getData) 
    },
    mounted() {
        this.initCharts()
        // this.getData()
         this.$socket.send({
            action:'getData',
            socketType:'SellerData',
            chartName:'seller',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter)
        // 界面加载完成 手动适配屏幕
        this.screenAdapter()
    },
    beforeDestroy() {
        clearInterval(this.timerId)
        // 取消屏幕监听器
        window.removeEventListener('resize',this.screenAdapter)
      this.$socket.unregisterCallBack('SellerData') 
    },
    computed:{
        ...mapState('theme')
    },
    methods: {
        initCharts(){
            // 初始化
             this.chartInstance = this.$echarts.init(this.$refs.seller_ref,'chalk')
             // 图表初始化配置
             const iniOpt = {
                 title:{
                    text:'商家销售统计',
                    textStyle:{
                        fontSize:44
                    },
                    top:10,
                    left:120
                },
                grid:{
                    top:'20%',
                    left:'3%',
                    right:'6%',
                    bottom:'3%',
                    containLabel:true // 包含坐标轴的文字
                },
                tooltip:{
                    trigger:'axis',
                    axisPointer:{
                        type:'line',
                        z:0,
                        lineStyle:{
                            width:66,
                            color:'#203443'
                        }
                    }
                },
                xAxis:{
                    type:'value'
                },
                yAxis:{
                    type:'category'
                },
                series:{
                    type:'bar',
                    barWidth:66,
                    label:{
                        show:true,
                        position:'right',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    itemStyle:{
                        barBorderRadius:[0,33,33,0], // 圆角
                        color:{
                            type:'linear', // 线性渐变
                            x:0,
                            y:0,
                            x2:1,
                            y2:0,
                            colorStops:[
                                {offset:0, color:'#5052EE'}, // 0% 处为红色
                                {offset:1, color:'#AB6EE5'}
                            ]
                        }
                    }
                }
             }
             // 
              this.chartInstance.setOption(iniOpt)
             //
             this.chartInstance.on('mouseover',()=>{
                clearInterval( this.timerId)
             })
             this.chartInstance.on('mouseout',()=>{
                 this.startInterval()
             })
        },
       async getData(res){
           // 请求数据
            // const {data:res} = await this.$http.get('seller')
            this.allData = res
            this.allData.sort((a,b)=>{
                return a.value - b.value // 从小到大  b.value-a.value 从大到小
            })
            // 计算总页码s
            this.totalPage = this.allData.length%5===0? this.allData.length/5 : this.allData.length/5 + 1
            this.updateChart()
            this.startInterval()
        },

        updateChart(){
            let start = (this.currentPage-1)*5
            let end = this.currentPage*5
            const showData = this.allData.slice(start,end) // 截取
            const sellerName = showData.map(v=>{
                return v.name
            })
             const sellerValue = showData.map(v=>{
                return v.value
            })
            const dataOpts = {
                yAxis:{
                    data:sellerName
                },
                series:{
                    data:sellerValue,
                }
            }
            this.chartInstance.setOption(dataOpts)
        },
        // 定时说新
        startInterval(){
          if(this.timerId){
              clearInterval(this.timerId)
          }
          this.timerId = setInterval(() => {
                this.currentPage++
                if(this.currentPage>this.totalPage){
                    this.currentPage = 1
                }
                this.updateChart()
           }, 3000);
        },
        // 屏幕大小变化
        screenAdapter(){
            let titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
            let adapterOpt = {
                title:{
                    text:'商家销售统计',
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                 tooltip:{
                    axisPointer:{
                        lineStyle:{
                            width:titleFontSize
                        }
                    }
                },
                series:{
                    barWidth:titleFontSize,
                    itemStyle:{
                        barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0] // 圆角
                    }
                }
            } 
            this.chartInstance.setOption(adapterOpt)
            this.chartInstance.resize()
        }
    },
    watch:{
        theme(){
            console.log('主题切换了');
            this.chartInstance.dispose() // 销毁图表对象
            this.initCharts() // 初始化图表对象
            this.screenAdapter() // 屏幕适配
            this.updateCharts() // 跟新图表
        }
    }
}
</script>

<style lang='less' scoped>

</style>